<template>
	<el-scrollbar maxheight="100vh">
		<el-menu router>
		  <!-- 首页菜单项 -->
		  <el-menu-item index="/index">
		    <el-icon>
		      <home />
		    </el-icon>
		    <template #title>首页</template>
		  </el-menu-item>
		
		  <!-- 动态生成的菜单项，来自 menuStore -->
		 <el-sub-menu
		   v-for="item in filteredMenu"
		   :key="item.id"
		   :index="item.frontUrl"
		 >
		   <template #title>
		     <el-icon>
		       <component :is="getIconName(item.frontUrl)" />
		     </el-icon>
		     {{ item.name }}
		   </template>
		   <el-menu-item
		     v-for="child in item.children"
		     :key="child.id"
		     :index="child.frontUrl"
		   >
		     <el-icon>
		       <component :is="getIconName(child.frontUrl)" />
		     </el-icon>
		     {{ child.name }}
		   </el-menu-item>
		 </el-sub-menu>
		
		
			<el-sub-menu>
				<template #title>
					<el-icon>
			    <analyse />
			  </el-icon>
			   统计信息
			 	</template>
				<el-menu-item index="/analyse">
					<el-icon>
						<interAnalyseVue/>
					</el-icon>
					走访统计
				</el-menu-item>
				<el-menu-item index="/riskanalyse">
					<el-icon>
						<proportion/>
					</el-icon>
			 	 风险比例
				</el-menu-item>
				<el-menu-item index="/mapview">
					<el-icon>
			    		<poormap />
			  		</el-icon>
			 	 数据地图
				</el-menu-item>
			</el-sub-menu>
		
		  <!-- 个人中心菜单项 -->
		 <el-menu-item index="/center">
		    <el-icon>
		      <center />
		    </el-icon>
		    个人中心
		  </el-menu-item>
		</el-menu>
	</el-scrollbar>	
</template>

<script setup>
	import home from '@/components/icons/home'
	import sys from '@/components/icons/sys'
	import ivi from '@/components/icons/mes'
	import admin from '@/components/icons/admin'
	import role from '@/components/icons/ro'
	import resource from '@/components/icons/resource'
	import center from '@/components/icons/center'
	import interview from '@/components/icons/luru'
	import history from '@/components/icons/record'
	import { userMenuStore } from '@/stores'
	import { ref,reactive,computed  } from 'vue'
	import clu from '@/components/icons/clu'
	import clue from '@/components/icons/clue'
	import record from '@/components/icons/re'
	import analyse from '@/components/icons/analyse.vue'
	import poormap from '@/components/icons/map.vue'
	import interAnalyseVue from '@/components/icons/interAnalyse.vue'
	import proportion from '@/components/icons/proportion.vue'
	const menuStore = userMenuStore()

	
	// 创建一个对象，将frontUrl对应到图标组件
	const iconComponents = {
			sys,
			ivi,
			admin,
			role,
			resource,
			interview,
			history,
			clu,
			clue,
			record
	}
	
	// 过滤掉不需要的菜单项
	const filteredMenu = computed(() => {
		console.log('Current menu:', menuStore.menu)
	  return menuStore.menu.filter(item => item.name !== '首页数据统计')
	})
	
	
	// 动态生成图标名称的方法
	const getIconName = (frontUrl) => {
	  // 去掉 frontUrl 的第一个 /，并返回图标组件名称
	  return iconComponents[frontUrl.replace('/', '')]
	}
</script>

<style scoped lang="scss">
	/* 设置选中路由背景色为红色 */
	.el-menu-item.is-active {
		background-color: #ff0000 !important;
		/* 设置背景色为红色 !important表示优先级*/
		color: white !important;
		/* 设置文字颜色为白色以确保可读性 */
	}

</style>